<!-- src/components/Calendar/views/YearView.vue -->
<template>
  <div class="year-view">
    <div class="year-header">{{ currentYear }}</div>
    <div class="year-grid">
      <div 
        class="month-card" 
        v-for="(month, index) in yearMonths" 
        :key="`${currentYear}-${index}`"
        @click="$emit('select-month', month)"
      >
        <div class="month-name">{{ month.name }}</div>
        <div class="month-days">
          <div class="month-week-header">
            <span v-for="day in weekDaysShort" :key="day" class="week-day-short">{{ day }}</span>
          </div>
          <div class="month-days-grid">
            <div 
              v-for="day in month.days" 
              :key="`${currentYear}-${month.month}-${day.date}`"
              class="month-day"
              :class="{
                'other-month': !day.isCurrentMonth,
                'today': day.isToday,
                'selected': day.isSelected
              }"
              @click.stop="handleDayClick(day, $event)"
            >
              {{ day.date }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加卡片组件 -->
    <YearViewCard
      :visible="showCard"
      :selected-date="selectedDay"
      :click-position="clickPosition"
      @close="closeCard"
      @go-to-day-view="goToDayView"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import YearViewCard from '../YearViewCard.vue'

interface Props {
  currentYear: number
  yearMonths: any[]
}

defineProps<Props>()

const emit = defineEmits(['select-month', 'select-year-date', 'go-to-day-view'])

const weekDaysShort = ['日', '一', '二', '三', '四', '五', '六']

// 卡片相关状态
const showCard = ref(false)
const selectedDay = ref(new Date())
const clickPosition = reactive({ x: 0, y: 0 })

// 处理日期点击
const handleDayClick = (day: any, event: MouseEvent) => {
  selectedDay.value = day.fullDate
  clickPosition.x = event.clientX
  clickPosition.y = event.clientY
  showCard.value = true
  emit('select-year-date', day)
}

// 关闭卡片
const closeCard = () => {
  showCard.value = false
}

// 跳转到日视图
const goToDayView = (date: Date) => {
  emit('go-to-day-view', date)
  closeCard()
}
</script>

<style scoped>
/* 保持原有样式不变 */
.year-view {
  padding: 20px;
  height: 90%;
  overflow-y: auto;
}

.year-header {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.month-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.month-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.month-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  text-align: center;
  color: #333;
}

.month-week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 8px;
}

.week-day-short {
  text-align: center;
  font-size: 10px;
  color: #666;
  padding: 2px 0;
}

.month-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.month-day {
  text-align: center;
  padding: 4px 2px;
  border-radius: 2px;
  cursor: pointer;
  font-size: 10px;
  transition: all 0.2s ease;
}

.month-day:hover {
  background: #e3f2fd;
}

.month-day.other-month {
  color: #ccc;
}

.month-day.today {
  background: #1976d2;
  color: white;
}

.month-day.selected {
  background: #1976d2;
  color: white;
}

@media (max-width: 768px) {
  .year-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>